<template>
  <!-- <router-view v-slot="{ Component }">
      <transition>
          <keep-alive>
              <div>
                  <component :is="Component" />
              </div>
          </keep-alive>
      </transition>
  </router-view>-->
  <!-- <router-view v-slot="{ Component }">
      <transition name="slide-fade">
          <div>
              <keep-alive>
                  <component :is="Component" />
              </keep-alive>
          </div>
      </transition>
  </router-view>-->
  <div>
    <router-view v-slot="{ Component, route }">
      <!--      <transition name="fade">-->
      <keep-alive :exclude="exclude" >
        <component :is="initRef(Component)" :key="route.path" v-if="ttt(Component,route)"/>
      </keep-alive>
      <!--      </transition>-->
    </router-view>
  </div>
</template>
<script setup>
const ttt = (Component,router) => {
  return out.exclude.indexOf(Component?.type?.name)===-1
}
const emit = defineEmits({
  exposeRef: () => {
    return true
  }
})
const initRef = (component) => {
  const pRef = component?.ref?.r?.value
  emit("exposeRef", pRef)
  return component
}
const out = defineProps({
  exclude: {default: ""}
})
</script>
<style scoped>


</style>